<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.69.0" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>滑动验证码 &middot; 郝朝帅的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0f ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/blog/"><h1>郝朝帅的博客</h1></a>
      <p class="lead">
       我的个人博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2020. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>滑动验证码</h1>
  <time datetime=2020-04-26T20:05:06&#43;0800 class="post-date">Sun, Apr 26, 2020</time>
  <h5 id="滑动验证码">滑动验证码</h5>
<p>第三方滑动验证码</p>
<p>vue-drag-verify       1.0.6</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue">&lt;<span style="color:#f92672">template</span>&gt;
	&lt;<span style="color:#f92672">div</span>&gt;
		&lt;<span style="color:#f92672">tr</span>&gt;
			&lt;<span style="color:#f92672">td</span>&gt;
    			<span style="color:#75715e">//滑块验证码
</span><span style="color:#75715e"></span>            &lt;<span style="color:#f92672">drag-verify</span>
					<span style="color:#f92672">:width</span><span style="color:#e6db74">=&#34;width&#34;</span>
					<span style="color:#f92672">:height</span><span style="color:#e6db74">=&#34;height&#34;</span>
					<span style="color:#f92672">:text</span><span style="color:#e6db74">=&#34;text&#34;</span>
					<span style="color:#a6e22e">ref</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#39;Verify&#39;</span>
					&gt;
    			<span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/drag-verify&gt;</span>
    		&lt;/<span style="color:#f92672">td</span>&gt;
    	&lt;/<span style="color:#f92672">tr</span>&gt;
	&lt;/<span style="color:#f92672">div</span>&gt;
&lt;/<span style="color:#f92672">template</span>&gt;

&lt;<span style="color:#f92672">script</span>&gt;

<span style="color:#75715e">//导入组件
</span><span style="color:#75715e"></span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">myheader</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;./myheader.vue&#39;</span>
<span style="color:#75715e">// 导入滑块验证码
</span><span style="color:#75715e"></span><span style="color:#66d9ef">import</span> <span style="color:#a6e22e">dragVerify</span> <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;vue-drag-verify&#39;</span>

<span style="color:#66d9ef">export</span> <span style="color:#66d9ef">default</span>{
	<span style="color:#a6e22e">data</span>(){
		<span style="color:#66d9ef">return</span>{
			<span style="color:#75715e">//声明滑块验证码相关数据
</span><span style="color:#75715e"></span>			<span style="color:#a6e22e">width</span><span style="color:#f92672">:</span><span style="color:#ae81ff">320</span>,
        <span style="color:#a6e22e">height</span><span style="color:#f92672">:</span><span style="color:#ae81ff">42</span>,
        <span style="color:#a6e22e">text</span><span style="color:#f92672">:</span><span style="color:#e6db74">&#39;请将滑块拖动到右边&#39;</span>
		}   
    },
	<span style="color:#a6e22e">components</span><span style="color:#f92672">:</span>{
		<span style="color:#e6db74">&#39;myheader&#39;</span><span style="color:#f92672">:</span><span style="color:#a6e22e">myheader</span>
	},
    <span style="color:#75715e">//提交事件
</span><span style="color:#75715e"></span>    <span style="color:#a6e22e">submit</span><span style="color:#f92672">:</span><span style="color:#66d9ef">function</span>(){
        <span style="color:#75715e">//判断是否拖动
</span><span style="color:#75715e"></span>        <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">$refs</span>.<span style="color:#a6e22e">Verify</span>.<span style="color:#a6e22e">isPassing</span>)
    }
}

&lt;/<span style="color:#f92672">script</span>&gt;


</code></pre></div>
</div>


    </main>

    
  </body>
</html>
